<!-- <template>
  <div style="padding: 20px; text-align: center;">
    <h1>简单的加法计算器</h1>
    <input v-model.number="num1" type="number" placeholder="输入第一个数字" />
    <span style="margin: 0 10px;">+</span>
    <input v-model.number="num2" type="number" placeholder="输入第二个数字" />
    <button @click="calculate">计算</button>
    <h2>结果：{{ result }}</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const num1 = ref(0);
const num2 = ref(0);
const result = ref(0);

function calculate() {
  result.value = num1.value + num2.value;
}
</script>

<style scoped>
input {
  padding: 5px;
  font-size: 16px;
}
button {
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
}
</style> -->




<!-- <template>
  <div class="container mt-5">
    <h1 class="text-center">简单的加法计算器</h1>
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="input-group mb-3">
          <input
            v-model.number="num1"
            type="number"
            class="form-control"
            placeholder="输入第一个数字"
          />
          <span class="input-group-text">+</span>
          <input
            v-model.number="num2"
            type="number"
            class="form-control"
            placeholder="输入第二个数字"
          />
        </div>
        <button @click="calculate" class="btn btn-primary w-100">计算</button>
        <h2 class="mt-3 text-center">结果：{{ result }}</h2>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const num1 = ref(0);
const num2 = ref(0);
const result = ref(0);

function calculate() {
  result.value = num1.value + num2.value;
}
</script> -->





<template>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">Tauri + Vue</a>
        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link class="nav-link" to="/">首页</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/countdown">倒计时计时器</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/random-number">随机数生成器</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/calculator">加法计算器</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/store-test">StoreTest</router-link>
          </li>
        </ul>
      </div>
    </nav>

    <div class="mt-4">
      <router-view></router-view> <!-- 路由内容渲染 -->
    </div>
  </div>
</template>

<script setup>
// 不需要额外的逻辑
</script>